<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <h1>{{ title1 }}</h1>
    <h1>{{ title2 }}</h1>
    <p>current count: {{ current }}</p>
    <div>
      <label>MIN COUNT:</label>
      <input type="number" v-model="range.min" />
    </div>
    <br />
    <div>
      <label>MAX COUNT:</label>
      <input type="number" v-model="range.max" />
    </div>
    <br />
    <button @click="plus(5)">+5</button>
    <button @click="minus(3)">-3</button>
    <button @click="set(233)">set 233</button>
    <button @click="reset()">reset</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { CountRange, useCount } from "./usecount";

export default defineComponent({
  name: "Home",
  // components: {
  //   HelloWorld,
  // },
  props: {
    title2: String,
  },
  data() {
    return {
      title1: "this is title1",
    };
  },
  setup() {
    const title2 = ref("this is title2");

    const range: CountRange = reactive({
      min: 5,
      max: 50,
    });

    const { current, minus, plus, set, reset } = useCount(10, range);

    return {
      title2,
      range,
      current,
      minus,
      plus,
      set,
      reset,
    };
  },
});
</script>
